<template>
  <div>
    <div class="top-fixed">
      <x-header
        :title="$t('notice.sendArea')"
        :left-options="{ backText: $t('common.back'), preventGoBack: true }"
        class="header"
        @on-click-back="clickBack"
      >
        <a slot="right" @click="confirm">{{ $t('notice.confirm') }}</a>
      </x-header>
    </div>
    <div class="button-tab">
      <button-tab v-model="showPart">
        <button-tab-item>{{ $t('notice.friend') }}</button-tab-item>
        <button-tab-item>
          {{ $t('notice.organization') }}
        </button-tab-item>
        <button-tab-item>
          {{ $t('notice.groups') }}
        </button-tab-item>
      </button-tab>
    </div>

    <div class="tab-contact">
      <!-- 联系人 -->
      <div v-show="showPart === 0" class="friends-box">
        <dood-friend @getSelectMembers="getSelectMembers" />
      </div>

      <!-- 组织架构 -->
      <div v-show="showPart === 1" class="department-box">
        <orgnization @getSelectOrgsAndUsers="getSelectOrgsAndUsers" />
      </div>

      <!-- 选择群组 -->
      <div v-show="showPart === 2">
        <group @getSelectGroups="getSelectGroups" />
      </div>
    </div>
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem, Toast, XHeader } from 'vux';
import DoodFriend from './common/DoodFriend';
import Orgnization from './common/Orgnization';
import Group from './common/Group';
export default {
  name: 'SendArea',
  components: {
    ButtonTab,
    ButtonTabItem,
    Toast,
    XHeader,
    DoodFriend,
    Orgnization,
    Group,
  },
  data() {
    return {
      showPart: 0, // 控制切换tab
      selectedUsers: [], // 从联系人列表中选择的人
      selectedOrgInfo: {}, // 从组织架构中选择的部门或者人
      selectedGroups: [],
    };
  },
  methods: {
    // 选择联系人
    getSelectMembers(data) {
      this.selectedUsers = data;
    },
    // 从部门中选择部门和联系人
    getSelectOrgsAndUsers(data) {
      this.selectedOrgInfo = data;
    },
    // 从群组中选择的群组信息
    getSelectGroups(data) {
      this.selectedGroups = data;
    },
    clickBack() {
      this.$emit('close', false);
    },
    // 确定
    confirm() {
      // 处理通讯录中选择的豆豆好友
      let areaMembersList = [];
      if (this.selectedUsers.length) {
        areaMembersList = this.handleUsersPropsData(
          this.selectedUsers,
          'userId',
          'name'
        );
      }

      // 处理组织架构中的数据
      const selectedOrgInfo = {
        checkedOrgs: [],
        uncheckedOrgs: [],
        checkedUsers: [],
        uncheckedUsers: [],
      };
      if (Object.keys(this.selectedOrgInfo).length) {
        selectedOrgInfo.checkedOrgs = this.handlePropsData(
          this.selectedOrgInfo.checkedOrgs,
          'orgId',
          'orgName'
        );
        selectedOrgInfo.uncheckedOrgs = this.handlePropsData(
          this.selectedOrgInfo.uncheckedOrgs,
          'orgId',
          'orgName'
        );
        selectedOrgInfo.checkedUsers = this.handleUsersPropsData(
          this.selectedOrgInfo.checkedUsers,
          'sourceId',
          'displayName'
        );
        selectedOrgInfo.uncheckedUsers = this.handleUsersPropsData(
          this.selectedOrgInfo.uncheckedUsers,
          'sourceId',
          'displayName'
        );
      }

      // 处理群组
      let areaGroups = [];
      if (this.selectedGroups.length) {
        areaGroups = this.handlePropsData(this.selectedGroups, 'id', 'name');
      }
      const selectedObj = {
        selectedUsers: areaMembersList,
        selectedOrgInfo: selectedOrgInfo,
        selectedGroups: areaGroups,
      };
      // 将选择好的人员部门传递给父组件
      this.$emit('getSelectedInfo', selectedObj);
      // 关闭弹窗
      this.$emit('close', false);
    },
    // 处理返给父组件的数据
    handlePropsData(arr, id, name) {
      const list = [];
      arr.forEach((item) => {
        const obj = {
          id: item[id],
          name: item[name],
        };
        list.push(obj);
      });
      return list;
    },
    // 处理users的id修改为sourceId
    handleUsersPropsData(arr, id, name) {
      const list = [];
      arr.forEach((item) => {
        const obj = {
          sourceId: item[id],
          name: item[name],
        };
        list.push(obj);
      });
      return list;
    },
  },
};
</script>

<style lang="less" scoped>
@import '../common/css/address-book.less';
</style>
